<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<!--生成盘点计划-->
<div class="modal fade" id="modal-create">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">盘点计划新增</h4>
            </div>
            <div class="modal-body">
                <form id="addPlanForm" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">盘点内容</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cpnContent"
                                   placeholder="请输入盘点内容">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cpnRemark"
                                   placeholder="请输入备注">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">参与人员</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cpnParticipants"
                                   placeholder="请输入参与人员">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">预计时间</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control datepicker"
                                   readonly="readonly" name="cpnStart"/>
                        </div>
                        <label class="col-sm-2 control-label" style="text-align: center">至</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control datepicker"
                                   readonly="readonly" name="cpnEnd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-commit">确定</button>
            </div>
        </div>
    </div>
</div>
<!--修改盘点计划-->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">盘点计划修改</h4>
            </div>
            <div class="modal-body">
                <form id="editPlanForm" class="form-horizontal" role="form">
                    <input type="hidden" id="cpnIdEdit" name="cpnId">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">盘点内容</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="cpnContentEdit" name="cpnContent"
                                   placeholder="请输入盘点内容">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="cpnRemarkEdit" name="cpnRemark"
                                   placeholder="请输入备注">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">参与人员</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="cpnParticipantsEdit" name="cpnParticipants"
                                   placeholder="请输入参与人员">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">预计时间</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control datepicker"
                                   readonly="readonly" id="cpnStartEdit" name="cpnStart"/>
                        </div>
                        <label class="col-sm-2 control-label" style="text-align: center">至</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control datepicker"
                                   readonly="readonly" id="cpnEndEdit" name="cpnEnd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit">确定</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header">
    <h1>
        库存盘点计划
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>计划编号</label>
                                    <input type="text" name="cpnCode" class="form-control"
                                           placeholder="请输入计划编号">
                                </div>
                                <div class="form-group">
                                    <label>盘点内容</label>
                                    <input type="text" name="cpnContent" class="form-control"
                                           placeholder="请输入盘点内容">
                                </div>
                                <div class="form-group">
                                    <label>
                                        状态
                                    </label>
                                    <select name="cpnStatus" class="form-control">
                                        <option value="1">未开始</option>
                                        <option value="2">执行中</option>
                                        <option value="3">已完成</option>
                                        <option value="" selected>全部</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>制作日期</label>
                                    <input type="text" class="form-control datepicker" name="startTimeQuery"
                                           readonly="readonly"/>
                                    <span>至</span>
                                    <input type="text" class="form-control datepicker" name="endTimeQuery"
                                           readonly="readonly"/>
                                </div>
                                <button type="button" class="btn btn-success" id="btn_search">搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row" id="toolbar1">
                    <button shiro:hasPermission="matinv:matcheckplan:edit" type="button"
                            class="btn btn-info"
                            id="btn-addPlan">
                        新增计划
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" data-height="500"></table>
                    <h4 id="check-progress-title">盘点整体进度</h4>
                    <table id="bootstrap-process-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    /**加载表格*/
    var table1, table2;

    /** 打开计划修改模态框 */
    function editPlan(id, d) {
        $("#cpnIdEdit").val(id);
        $("#cpnContentEdit").val(d.cpnContent);
        $("#cpnRemarkEdit").val(d.cpnRemark);
        $("#cpnParticipantsEdit").val(d.cpnParticipants);
        $("#cpnStartEdit").val(d.cpnStart);
        $("#cpnEndEdit").val(d.cpnEnd);

        js.modal.open("modal-edit");
    }

    /** 更改状态 */
    function updateStatus(id, status) {

        var statusName;
        if (status == 0) {
            statusName = "删除";
        } else if (status == 3) {
            statusName = "提交";
        } else if (status == 4) {
            statusName = "撤销";
        }
        js.modal.confirm("确定" + statusName + "库存盘点计划吗？", function (result) {
            js.post({
                url: ctx + "material/checkPlan/updateStatus",
                data: {
                    cpnId: id,
                    cpnStatus: status
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table1);
                        // 加载 盘点整体进度 列表
                        js.table.destroy(table2);
                        planProcess(result.data);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    /** 盘点计划状态 */
    function planProcess(cpnId) {
        table2 = js.table.init({
            id: "bootstrap-process-table",
            url: ctx + "material/checkPlan/planProcess",
            pageSize: 1,
            pagination: false,
            showExport: false,
            queryData: {cpnId: cpnId},
            columns: [
                {title: '计划编号', field: 'cpnCode'},
                {
                    title: '盘点计划',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<span style="display: block;height: 100%;width: 100%;color: #333333;">' + row.cpnPlanStatusName + '</span>');
                        return actions.join('');
                    },
                    cellStyle: function (value, row, index) {
                        if (row.cpnPlanStatusName == "未开始") {
                            return {css: {"background-color": "#C1C1C1"}}
                        } else if (row.cpnPlanStatusName == "执行中") {
                            return {css: {"background-color": "#f39c12"}}
                        } else if (row.cpnPlanStatusName == "已完成") {
                            return {css: {"background-color": "#00a65a"}}
                        }
                    }
                },
                {
                    title: '盘点结果',
                    formatter: function (value, row, index) {
                        if (hasP("matinv:matcheckresult:view") && row.cpnPlanStatusName == "已完成") {
                            var actions = [];
                            actions.push('<a style="display: block;height: 100%;width: 100%;color: #333333" href="' + ctx + 'material/checkPlan/resultSave/' + row.cpnId + '" >' + row.cpnResStatusName + '</a>');
                            return actions.join('');
                        } else {
                            return row.cpnResStatusName;
                        }

                    },
                    cellStyle: function (value, row, index) {
                        if (row.cpnResStatusName == "未开始") {
                            return {css: {"background-color": "#C1C1C1"}}
                        } else if (row.cpnResStatusName == "执行中") {
                            return {css: {"background-color": "#f39c12"}}
                        } else if (row.cpnResStatusName == "已完成") {
                            return {css: {"background-color": "#00a65a"}}
                        }
                    }
                },
                {
                    title: '盘点损溢调整',
                    formatter: function (value, row, index) {
                        if (hasP("matinv:matcheckadj:view") && row.cpnResStatusName == "已完成") {
                            var actions = [];
                            actions.push('<a style="display: block;height: 100%;width: 100%;color: #333333" href="' + ctx + 'material/checkPlan/adjust/' + row.cpnId + '" >' + row.cpnAdjStatusName + '</a>');
                            return actions.join('');
                        } else {
                            return row.cpnAdjStatusName;
                        }
                    },
                    cellStyle: function (value, row, index) {
                        if (row.cpnAdjStatusName == "未开始") {
                            return {css: {"background-color": "#C1C1C1"}}
                        } else if (row.cpnAdjStatusName == "执行中") {
                            return {css: {"background-color": "#f39c12"}}
                        } else if (row.cpnAdjStatusName == "已完成") {
                            return {css: {"background-color": "#00a65a"}}
                        }
                    }
                },
                {
                    title: '损溢表', formatter: function (value, row, index) {
                        if (hasP("matinv:matchecksub:view") && row.cpnAdjStatusName == "已完成") {
                            var actions = [];
                            actions.push('<a style="display: block;height: 100%;width: 100%;color: #333333" href="' + ctx + 'material/checkPlan/resultCommit/' + row.cpnId + '" >' + row.cpnPalStatusName + '</a>');
                            return actions.join('');
                        } else {
                            return row.cpnPalStatusName;
                        }

                    },
                    cellStyle: function (value, row, index) {
                        if (row.cpnPalStatusName == "未开始") {
                            return {css: {"background-color": "#C1C1C1"}}
                        } else if (row.cpnPalStatusName == "执行中") {
                            return {css: {"background-color": "#f39c12"}}
                        } else if (row.cpnPalStatusName == "已完成") {
                            return {css: {"background-color": "#00a65a"}}
                        }
                    }
                }
            ]
        });
    }

    $(function () {

        /** 加载列表 */
        table1 = js.table.init({
            url: ctx + "material/checkPlan/planList",
            toolbar: "#toolbar1",
            pageSize: 300,
            onClickRow: function (row) {
                js.table.destroy(table2);
                planProcess(row.cpnId);
            },
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    planProcess(data.rows[0].cpnId);
                }
            },
            columns: [
                {
                    title: '序号', field: '', width: '40',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {title: '计划编号', field: 'cpnCode'},
                {title: '盘点内容', field: 'cpnContent'},
                {title: '备注', field: 'cpnRemark'},
                {title: '开始时间', field: 'cpnStart'},
                {title: '结束时间', field: 'cpnEnd'},
                {title: '参与人', field: 'cpnParticipants'},
                {
                    title: '状态', field: 'cpnStatus',
                    formatter: function (value, row, index) {
                        if (value === 1) {
                            return '未开始';
                        } else if (value === 2) {
                            return '执行中';
                        } else if (value === 3) {
                            return '已完成';
                        }
                    }
                },
                {title: '制作人', field: 'cpnMaker'},
                {title: '制作日期', field: 'cpnDate'},
                {
                    title: '操作', width: '140',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.cpnStatus === 1 && hasP("matinv:matcheckadd:view") && (row.cpnAccount === sessionUser.account || sessionUser.account === "admin")) {
                            actions.push('<a class="btn btn-info btn-xs" href="' + ctx + 'material/checkPlan/planDetail/' + row.cpnId + '" >添加明细</a>');
                        }
                        if (hasP("matinv:matcheckplan:edit") && (row.cpnAccount === sessionUser.account || sessionUser.account === "admin")) {
                            if (row.cpnStatus === 1) {
                                actions.push("<a class='btn btn-warning btn-xs'  href='javascript:void(0);' onclick='editPlan(" + row.cpnId + "," + JSON.stringify(row) + ")'>修改</a>");
                                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="updateStatus(' + row.cpnId + ',0)"> 计划删除</a>');
                                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0);" onclick="updateStatus(' + row.cpnId + ',3)" >提交</a>');
                            }
                            if (row.cpnStatus != 1) {
                                actions.push('<a class="btn btn-info btn-xs" href="' + ctx + 'material/checkPlan/planDetail/' + row.cpnId + '" >查看明细</a>');
                            }
                            if (row.cpnStatus === 2 && row.cpnResStatus != 3 && row.checkCount == 0) {
                                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="updateStatus(' + row.cpnId + ',4)"> 撤销</a>');
                            }
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        /** 表格搜索 */
        $("#btn_search").click(function () {
            js.table.search(table1);
        });

        /** 打开盘点计划制作模态框 */
        $("#btn-addPlan").on('click', function () {
            js.modal.open("modal-create")
        });

        /** 保存盘点计划 */
        $("#btn-commit").click(function () {

            js.validSubmit({
                formId: "addPlanForm",
                url: ctx + "material/checkPlan/save",
                data: new FormData($("#addPlanForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.hide("modal-create");
                        js.modal.success("操作成功");
                        js.table.refresh(table1);
                        // 加载 盘点整体进度 列表
                        js.table.destroy(table2);
                        planProcess(result.data);
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        })

        /** 修改盘点计划 */
        $("#btn-edit").click(function () {

            js.validSubmit({
                formId: "editPlanForm",
                url: ctx + "material/checkPlan/edit",
                data: new FormData($("#editPlanForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.hide("modal-edit");
                        js.modal.success("操作成功");
                        js.table.refresh(table1);
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        })

        /** 关闭保存盘点计划模态框 */
        js.modal.hideEvent("modal-create", function () {
            js.reset("addPlanForm");
            js.validate.reset("addPlanForm");
        });

        /** 关闭修改盘点计划模态框 */
        js.modal.hideEvent("modal-edit", function () {
            js.reset("editPlanForm");
            js.validate.reset("editPlanForm");
        });

        /** 验证初始化 */
        js.validate.init("addPlanForm", {
            fields: {
                cpnContent: {validators: {notEmpty: {message: '请输入盘点内容'}}},
                cpnParticipants: {validators: {notEmpty: {message: '请输入参与人员'}}}
            }
        });

        /** 验证初始化 */
        js.validate.init("editPlanForm", {
            fields: {
                cpnContent: {validators: {notEmpty: {message: '请输入盘点内容'}}},
                cpnParticipants: {validators: {notEmpty: {message: '请输入参与人员'}}}
            }
        });

    })

</script>

</body>
</html>